<template>
  <div class="search-component">
    <div class="back">
      <i class="cubeic-back" @click="$router.back()"></i>
    </div>
    <div class="keyword" @click="handleClick">
      <i class="cubeic-search"></i>
      <span>请输入关键字</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isCategoryPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // keyword: '搜索商品'
      // keyword: ''
    }
  },
  mounted () {
    // 如果搜索本页,自动对焦
    // const url = this.$route.path
    // if (url === '/search') {
    //   this.$refs.input.focus()
    // }
  },
  methods: {
    handleClick() {
      this.$router.push('/search')
    }
  }
}
</script>

<style scoped lang="stylus">
.search-component
  // z-index, background解决“分类”滚动时问题
  z-index 10
  height 70px
  padding 5px 0
  box-sizing border-box
  display flex
  background-image url("../../assets/images/search.png")
  background-size cover
  background-repeat no-repeat
  .back
    width 50px
    line-height 60px
    i
      font-size 20px
      color $second_text_color
      opacity .8
  .keyword
    flex 1
    background $background_color
    margin 12.5px 15px 12.5px 0
    border-radius 15px
    line-height 35px
    text-align left
    padding 2.5px 10px
    display flex
    i
      margin-right 7px
      color #8e9f91
      font-size 16px
    span
      color #8e9f91

</style>
